<template>
  <div class="image-display">
    <el-image
      v-for="(image, index) in images"
      :key="index"
      :src="image.url"
      :alt="image.name"
      :fit="props.fit"
      :hide-on-click-modal="true"
      :preview-teleported="true"
      class="image-item"
      :style="{ height: props.height, width: props.width }"
      :preview-src-list="images.map((img) => img.url)"
      :z-index="999"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  images: {
    type: String,
    required: true,
  },
  height: {
    type: String,
    default: "unset",
  },
  width: {
    type: String,
    default: "unset",
  },
  fit: {
    type: String,
    default: "contain",
  },
});

const images = ref([]);

onMounted(() => {
  try {
    const parsedImages = JSON.parse(props.images);
    images.value = parsedImages;
  } catch (error) {
    console.error("Failed to parse images data:", error);
    images.value = [];
  }
});
</script>

<style scoped>
.image-display {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.image-item {
  border-radius: 4px;
  object-fit: cover;
}
</style>
